<template>
  <div class="orders">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 栅格布局 每一行col总共24份 当前占8份  gutter每一格中间的空隙 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 一个输入框  clear清空触发事件 -->
            <el-input ref="input" v-model="inputtext" @clear="init" clearable placeholder="请输入内容" class="input-with">
              <!-- slot="append" 尾部的插槽 -->
              <el-button @click="init" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        <!-- 当前栅格占4 -->
        <el-col :span="4">
        </el-col>
      </el-row>
      <!-- 表格 tableData 绑定的数据对象 边框 stripe隔行变色-->
      <el-table :data="tableData" :border="true" style="width: 100%">
        <!-- 每一行 index表示当前行是索引-->
        <el-table-column label="#" type="index"></el-table-column>
        <!-- prop="username" 这个属性表示表格内容采用table的 :data对象内的对应属性-->
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price" width=100></el-table-column>
        <el-table-column label="是否支付" prop="order_pay" width=100>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_pay == 0" type="danger">{{ '未付款' }}</el-tag>
            <el-tag v-else type="success">{{ '已付款' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" width=100></el-table-column>
        <el-table-column label="下单时间" prop="create_time" width="150">
          <template slot-scope="scope">
            {{ scope.row.create_time | time }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="set_dialog = true" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="logistics_btn(scope.row)" type="success" icon="el-icon-location" circle></el-button>
            <!-- <el-button @click="setitem(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button @click="deleteitem(scope.row.goods_id)" size="mini" type="danger" icon="el-icon-delete"> -->
            <!-- </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="gettableinfo.pagenum" :page-sizes="[2, 5, 10]" :page-size="gettableinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 物流 -->
    <el-dialog title="物流状态" @close="logistics_close" :visible.sync="logistics_dialog" width="50%">
      <el-timeline :reverse="false">
        <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logistics_dialog = false">取 消</el-button>
        <el-button type="primary" @click="logistics_dialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改地址" @close="set_close" :visible.sync="set_dialog" width="50%">
      <el-form ref="setposition_ref" label-width="90px" :model="set_from" :rules="set_rules">
        <el-form-item label="省市区/县" prop="position">
          <el-cascader style="width: 100%;" clearable v-model="set_from.position" :options="selectoptions"
            :props="selectprop" @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailed">
          <el-input v-model="set_from.detailed"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="set_dialog = false">取 消</el-button>
        <el-button type="primary" @click="set_ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import weizhi from '../assets/weizhi.js'

export default {
  data() {
    return {
      gettableinfo: {
        query: '',
        //当前页
        pagenum: 1,
        //每一页条数
        pagesize: 5,
      },
      total: 0,
      inputtext: '',
      tableData: [],
      //弹窗
      logistics_dialog: false,
      //
      activities: [
        {
          time: "2018-05-10 09:39:00",
          ftime: "2018-05-10 09:39:00",
          context: "已签收,感谢使用顺丰,期待再次为您服务",
          location: ""
        },
        {
          time: "2018-05-10 08:23:00",
          ftime: "2018-05-10 08:23:00",
          context: "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
          location: ""
        },
        {
          time: "2018-05-10 07:32:00",
          ftime: "2018-05-10 07:32:00",
          context: "快件到达 [北京海淀育新小区营业点]",
          location: ""
        },
        {
          time: "2018-05-10 02:03:00",
          ftime: "2018-05-10 02:03:00",
          context: "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
          location: ""
        }
      ],
      //弹窗
      set_dialog: false,
      //修改form
      set_from: {
        position: [],
        detailed: '',
      },
      set_rules: {
        position: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        detailed: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },

      selectoptions: weizhi,
      selectprop: {
        // label,
        // value: 'cat_id',
        // children: 'children',
        expandTrigger: 'hover',
      },
    }
  },
  filters: {
    time(v) {
      return moment(parseInt(v)).format('YYYY-MM-DD')
    }
  },
  created() {
    this.initpagedata();
  },
  methods: {
    async initpagedata() {
      let { data: res } = await this.$http.get(`orders`, { params: this.gettableinfo });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      console.log(res.data);
      this.tableData = res.data.goods;
      this.total = res.data.total;
    },
    //输入框清空 //确定
    init() {
      this.gettableinfo.query = this.inputtext;
      this.initpagedata();
    },
    //每页总数变
    handleSizeChange(v) {
      this.gettableinfo.pagenum = 1;
      this.gettableinfo.pagesize = v;
      this.initpagedata();
    },
    //页数变
    handleCurrentChange(v) {
      this.gettableinfo.pagenum = v;
      this.initpagedata();
    },
    //物流按钮
    async logistics_btn(row) {
      // let { data: res } = await this.$http.get(`kuaidi/1106975712662`);
      // if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      // this.activities = res.data;
      this.logistics_dialog = true;
    },
    //弹框关闭事件
    logistics_close() { },

    //弹窗关闭事件
    set_close() { },
    //三级联动修改事件
    handleChange() { },
    set_ok() {
      this.$refs.setposition_ref.validate(async v => {
        if (!v) return this.$message.error('表单校验错误');
        this.set_dialog = false;
      })
    },

  },
}
</script>

<style>
</style>